import React, { Component } from 'react'
import {View, Text, TouchableOpacity,ImageBackground, Image, FlatList,ScrollView} from 'react-native'
import {request} from '../../network/request'
import {sortDongtai} from '../../utiles/tools'
export default class Friends extends Component {
  constructor(props){
    super(props)
    this.state = {
      inf:[],
      isShow:false
    }
  }
  componentDidMount() {
    request({
      url:'/home/dongtai'
    }).then(res => {
      //排序（按时间顺序）
      let arr = sortDongtai(res.data);
      this.setState({
        inf:arr,
        isShow:true
      })

      console.log(arr)
    }).catch(err => {
      console.log(err)
    })
  }
  render() {
    let {isShow, inf} = this.state
    if(!isShow) {
      return(
        <View></View>
      )
    }else{
      return (
        <View>
        <View > 
          {/* titlw */}
          <View style={{height:100}}>
            <ImageBackground source={{uri:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605284991695&di=e63308c34d47c3b84792789c88d03c6b&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F05%2F87%2F23%2F365c88a7599f69f.jpg'}}
              style={{height:100}}
            ></ImageBackground>
            <View style={{height:100,flex:1,flexDirection:'row',alignItems:'center',position:'absolute',left:'50%',transform:[{translateX:-50}]}}>
              <TouchableOpacity style={{height:40,width:60}}>
                <Text style={{textAlign:'center',fontSize:24,marginTop:25,fontWeight:'bold'}}>推荐</Text>
              </TouchableOpacity>
              <TouchableOpacity style={{height:40,width:60}}>
                <Text style={{textAlign:'center',fontSize:24,marginTop:25,fontWeight:'bold'}} >最新</Text>
              </TouchableOpacity>
            </View>
          </View>
          {/* 动态 */}
          <ScrollView>
          {       
            inf.map((item, index) => {
              return  <ScrollView style={{backgroundColor:'white',padding:10}}>
              {/* 个人信息 */}
              <View style={{height:100}}>
              <View style={{flex:1,flexDirection:'row',justifyContent:'space-between',alignItems:'center',height:100,backgroundColor:'white'}}>
                  {/* 图片 */}
                  <View style={{height:100,width:100}}>
                    <Image source={{uri:item.img}}
                      style={{height:100,width:100,borderRadius:50}}
                    ></Image>
                  </View>
                  {/* 个人信息 */}
                  <View style={{height:70,backgroundColor:'green',flex:1,backgroundColor:'white'}}> 
                    <View style={{height:'50%',flex:1,flexDirection:'row',justifyContent:'flex-start',paddingLeft:10}}>
                      <Text style={{fontSize:16}}>{item.name} 女  17</Text>
                      <Image source={require('../../assets/img/nansheng.png')}
                        style={{height:25,width:25,marginLeft:10,marginTop:-3}}
                      ></Image>
                    </View>
                    <View style={{height:'50%',paddingLeft:10,}}>
            <Text style={{fontSize:16}}>单身|{item.school}|年龄相仿</Text>
                    </View>
                  </View>
                  {/* 爱心 */}
                  <View style={{height:70,width:80,paddingLeft:20,}}>
                    <Image source={require('../../assets/img/gengduo.png')}
                      style={{height:30,width:30,marginTop:15,marginLeft:15}}
                    ></Image>
                  </View>
              </View>
            </View>
              {/* 动态的内容 */}
              <View style={{marginTop:10}}>
                {/* 消息 */}
            <Text style={{fontSize:17}}>{item.dongtai.contnet}</Text>
                <View style style={{marginTop:10}}>
            <Text style={{fontSize:17,color:'grey'}}>距离{(Math.random()*10).toFixed(2)}km  {item.dongtai.time}</Text>
                </View>
              </View>
               {/* 点赞评论 */}
              <View style={{height:60}}>
                <View style={{height:60,flex:1,flexDirection:'row',justifyContent:'space-between',alignItems:'center'}}>
                  <View style={{flex:1,flexDirection:'row',alignItems:'center'}}>
                    <Image source={require('../../assets/img/dianzan.png')}></Image>
                    <Text style={{fontSize:18,marginLeft:5,color:'grey'}} >2</Text>
                  </View>
                  <View  style={{flex:1,flexDirection:'row',justifyContent:'center',alignItems:'center'}}>
                    <Image source={require('../../assets/img/pinglun.png')}></Image>
                    <Text style={{fontSize:18,marginLeft:5,color:'grey'}}>2</Text>
                  </View>
                  <View  style={{flex:1,flexDirection:'row',justifyContent:'flex-end',alignItems:'center'}}>
                    <Image source={require('../../assets/img/019.png')}></Image>
                    <Text style={{fontSize:18,marginLeft:5,color:'grey'}}>2</Text>
                  </View>
                </View>
              </View>
          </ScrollView>
            })
          }
          </ScrollView>
        </View>
        <TouchableOpacity style={{height:80,width:80,borderRadius:50,position:'absolute',right:0,top:250,borderWidth:1,borderColor:'blue'}}>
            <ImageBackground source={require('../../assets/img/fabu.png')} 
              style={{height:60,width:60,marginLeft:10,marginTop:10}}
            ></ImageBackground>

          </TouchableOpacity>
        </View>
      )
    }
  }
}
